<template>
	<div @click="showdetail" class="mes_card">
		<div class="mes_card_top">
			<div style="padding-top: 20px;padding-left: 20px;" class="decription">
				<img width="20" height="20" src="https://obscloud.ulearning.cn/resources/web/17138858891083214.png">
				<div class="title">
					<p> {{ title }}</p>
				</div>
				<view class="type">
					<view class="action">
						<view class="cu-tag round bg-orange light">{{ types }}</view>
					</view>
				</view>
			</div>
			<!-- <div style="margin-top: 10px;" class="title">
					<p> {{ title }}</p>
				</div> -->
		</div>
		<div class="mes_card_body">
			<div>
				<img :src="pic" class="headimg" />
			</div>
			<div>
				<div class="card_content">
					{{ content }}
				</div>
			</div>
		</div>
		<div class="mes_card_bottom" style="color: #0081ff;">
			{{ time.substring(0, 10) }}
		</div>
	</div>
	<!-- <view class="mes" @click="showdetail">
		<img :src="pic" alt="" class="headimg" />
		<view>
			<h2 class="title">{{title}}</h2>
			<view class="content">
				{{Content}}
			</view>
			<view class="timeAndType">
				<view class="time">
					{{time.substring(0,10)}}
				</view>
				<view class="type">
					<view class="action">
						<view class="cu-tag round bg-orange light">{{types}}</view>
					</view>
				</view>
			</view>
		</view>
	</view> -->
</template>

<script>
import {
	truncateString
} from '@/store/constants.js'
export default {
	props: ['title', 'pic', 'content', 'id', 'time', 'types'],
	mounted() {
		this.Content = truncateString(this.content)
	},
	data() {
		return {
			Content: ''
		}
	},
	methods: {
		showdetail() {
			console.log(this.id)
			uni.navigateTo({
				url: `/subpkg/mes_detail/mes_detail?id=${this.id}`
			})
		}
	}
}
</script>

<style scoped lang="less">
@media screen and (min-width: 1200px) {}

.decription {
	display: flex;
	justify-content: space-between;
	padding-right: 20px;
}

.card_content {
	padding: 20px;
}

.mes_card {
	width: 94%;
	margin: 3%;
	margin-right: 10px;
	background-color: #fff;
	margin-bottom: 20px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding-bottom: 20px;
}

.mes_card_top {
	width: 100%;
	margin-bottom: 20px;

}

.mes_card_bottom {
	width: 100%;
	display: flex;
	justify-content: end;
	padding-right: 20px;
	padding-top: 20px;
}

.mes_card_body {
	width: 90%;
	padding: 10%;
	display: flex;
	justify-content: start;
	flex-direction: row;
	background-color: #f3f7fa;
	padding: 10px;
	align-items: center;
	align-content: center;
	border-radius: 5px;

}

.meslist {
	position: relative;
	z-index: 1;
	padding: 18rpx;
}

/* 单个卡片 */
.mes {
	align-items: center;
	z-index: 5;
	display: flex;
	border-radius: 10rpx;
	padding-top: 3vh;
	padding-bottom: 3vh;
	box-shadow: 1px 3px 5px 3px #888888;
	background-color: #fefefe;
	margin: 15rpx;
}

.headimg {
	width: 60px;
	height: 60px;
	margin-left: 6rpx;
	border-radius: 10px;
	// margin-bottom: 10rpx;
}

.content {
	width: 490rpx;
	font-size: 40rpx;
	-webkit-line-clamp: 2;
	margin-left: 15rpx;

}

.title {
	font-weight: 600;
	font-size: 35rpx;
	margin-left: 40rpx;
}

.bg {
	width: 100%;
	height: 74%;
	z-index: 0;
	position: absolute;
}

.status {
	// margin-top: -15rpx;
	font-size: small;
	margin-right: 5rpx;
}
</style>